<template>
  <div class="empty">
    <img :src="props.icon" alt="" />
    <div class="title">{{ props.title }}</div>
    <p class="text">{{ props.text }}</p>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  icon: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
  text: {
    type: String,
    default: ''
  }
})
</script>

<style scoped>
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;

  img {
    width: 150px;
    height: 150px;
    margin-bottom: 10px;
  }

  .title {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 5px;
  }

  .text {
    font-size: 0.9rem;
    color: #adb5bd;
  }
}
</style>
